<script setup>
  import {ref, computed, reactive, watch} from "vue"
  // 存储数组的键，定义常量进行保存，便于后续修改
  const SCORELIST_KEY = "scoreList-key"
  // 先尝试从本地存储进行读取，若是返回null则表示false，按照逻辑或的思想取后面的值
  const scoreList = ref(( JSON.parse(localStorage.getItem(SCORELIST_KEY)) || [
    {id: 1, subject: "语文", score: 78},
    {id: 2, subject: "数学", score: 59},
    {id: 3, subject: "英语", score: 88},
    {id: 4, subject: "化学", score: 97},
    {id: 5, subject: "物理", score: 69},
    ]))

  //1.删除列表中的单个元素
  const onDel = (i) => {
    // 询问
    if (window.confirm("确认删除吗？")) {
      scoreList.value.splice(i, 1)
    }
  }
  // 2.计算属性求总分与平均分
  const totalScore = computed(() => {
    return scoreList.value.reduce((prev, item) => prev + item.score, 0)
  })
  const avgScore = computed(() => {
    if (scoreList.value.length === 0) {
      return 0
    }
    // 计算属性在js中使用需要 .value
    return totalScore.value / scoreList.value.length
  })
  // 3.新增数据
  const newScore = reactive({
    subject: "",
    score: ""
  })
  const onAdd = () => {
    // 非空校验
    if (!newScore.subject || !newScore.score) {
      return window.alert("科目名称或者成绩不能为空！")
    }
    // 执行插入
    scoreList.value.push({
      id: Date.now(),
      ...newScore
    })
    // 清空表单
    newScore.subject = ""
    newScore.score = ""
  }
  // 4.监视响应式数组，若是出现改变，则将其同步至本地存储中
  watch(scoreList, () => {
    // 序列化后存储至本地
    localStorage.setItem(SCORELIST_KEY, JSON.stringify(scoreList.value))
  }, {deep: true})

</script>

<template>
  <!-- 数据展示列表 -->
  <div class="show">
    <!-- 1.数据展示表 -->
    <table cellspacing="0" >
      <thead>
        <tr>
          <th>编号</th>
          <th>科目</th>
          <th>成绩</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item, index in scoreList" :key="item.id">
          <td>{{ index+1 }}</td>
          <td>{{ item.subject }}</td>
          <td :class="{fail: item.score < 60}">{{ item.score }}</td>
          <td><a href="#" @click="onDel(index)">删除</a></td>                                                                                               
        </tr>
      </tbody>
      <!-- 2.列表为空提示表 -->
      <tbody class="none" v-if="scoreList.length === 0">
        <tr>
          <td colspan="5">暂无数据</td>
        </tr>
      </tbody>
    </table>
    <!-- 3.数据统计展示 -->
    <footer>
      <span>总分：{{ totalScore }}</span>
      <span>平均分：{{ avgScore }}</span>
    </footer>
  </div>
  <!-- 输入表单 -->
  <div class="enter">
    <form action="#">
      <span>科目：<input type="text" placeholder="请输入科目" v-model.trim="newScore.subject"></span>
      <span>分数：<input type="number" placeholder="请输入分数" v-model.number="newScore.score"></span>
      <button class="commit" @click="onAdd()">添加</button>
    </form>
  </div>
</template>

<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  #app {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 200px;
  }
  /* 数据展示列表样式 */
  table {
    width: 650px;
    border-collapse: collapse;
  }
  .show th {
    background-color: #ddd;
  }
  .show tbody tr:hover {
    background-color: #eee;
  }
  .show th, .show td {
    height: 40px;
    border: 1px #ccc solid;
    text-align: center;
  }
  /* .show a {
    color: inherit;
  } */
  .show .fail {
    color: red;
  }
  .none {
    height: 100px;
  }
  footer {
    width: 650px;
    height: 40px;
    border: 1px solid #ccc;
    border-top: transparent;
    text-align: center;
    line-height: 34px;
  }
  footer span {
    margin: 0 28px;
  }
  /* 输入表单样式 */
  .enter {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
    height: 200px;
  }
  .enter span {
    display: block;
    margin: 20px 0;
  }
  .enter input {
    height: 40px;
    width: 200px;
    padding: 0 10px;
    outline: none;
  }
  .enter .commit {
    width: 50px;
    height: 28px;
    margin-left: 50px;
    background-color: #2e78e0;
    color: aliceblue;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
</style>